<template>

    <el-dialog :title="showTitle" :visible="showDialog" @close="close">
        <el-form ref="addDept" :model="formData" :rules="rules" label-width="120px">

            <el-form-item prop="name" label="部门名称">
                <el-input v-model="formData.name" placeholder="2-10个字符" size="mini" style="width: 80%;" />
            </el-form-item>

            <el-form-item prop="code" label="部门编码">
                <el-input v-model="formData.code" placeholder="2-30个字符" size="mini" style="width: 80%;" />
            </el-form-item>

            <el-form-item prop="managerId" label="部门负责人">
                <el-select v-model="formData.managerId" placeholder="请选择" size="mini" style="width: 80%;">
                    <el-option v-for="item in managerList" :key="item.id" :label="item.username"
                        :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item prop="introduce" label="部门介绍">
                <el-input v-model="formData.introduce" placeholder="2-100个字符" type="textarea" :row="4" size="mini"
                    style="width: 80%;" />
            </el-form-item>

            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="12">
                        <el-button size="mini" type="primary" @click="btnOK">确定</el-button>
                        <el-button size="mini" @click="close">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { getDepartment,getManagerList,getDepartmentDetail,addDepartment,updateDepartmentDetail } from '@/api/department'

export default {
    name: "AddDept",
    data() {
        return {
            managerList: [],
            formData: {
                code: '',
                introduce: '',
                managerId: '',
                name: '',
                pid: '',
            },
            rules: {
                code: [{
                    required: true,
                    message: '部门编码空着呢！',
                    trigger: 'blur'
                }, {
                    min: 2, max: 30, message: '长度2-30！', trigger: 'blur'
                },{
                    trigger: 'blur',
                    validator:async(rule,value,callback)=>{
                        // value 是部门编码
                        let result = await getDepartment()
                        if(this.formData.id){
                            // 编辑模式
                            result = result.filter( item => item.id !== this.formData.id)
                        }
                        if(result.depts.some(item => item.code === value)){
                            callback(new Error('部门中已经有这个编码了!'))
                        }else{
                            callback()
                        }
                    }
                }],
                introduce:[{
                    required: true,
                    message: '部门介绍空着呢！',
                    trigger: 'blur'
                }, {
                    min: 2, max: 100, message: '长度2-100！', trigger: 'blur'
                }],
                managerId:[{
                    required: true,
                    message: '部门负责人空着呢！',
                    trigger: 'blur'
                }],
                name:[{
                    required: true,
                    message: '部门名称空着呢！',
                    trigger: 'blur'
                }, {
                    min: 2, max: 10, message: '长度2-10！', trigger: 'blur'
                },{
                    trigger: 'blur',
                    validator:async(rule,value,callback)=>{
                        let result = await getDepartment()
                        // 编辑场景
                        if(this.formData.id){
                            // 编辑模式 排除自身
                            result = result.filter( item => item.id !== this.formData.id)
                        }
                        if(result.depts.some(item => item.name === value)){
                            callback(new Error('部门中已经有这个名称了!'))
                        }else{
                            callback()
                        }
                    }
                }],
            }
        }
    },
    props:{
        showDialog:{
            type:Boolean,
            default:false
        },
        currentNodeId:{
            type:Number,
            default:null
        }
    },
    created(){
        // 获取管理员信息接口
        this.getManagerList()
    },
    methods:{
        // 获取组织的详情
        async getDepartmentDetail(id){
            // 调用接口获取数据
            this.formData = await getDepartmentDetail(id)
        },

        async getManagerList(){
            this.managerList = await getManagerList()
        },

        btnOK(){
            this.$refs.addDept.validate( async isOK =>{
                if(isOK){
                    let msg = '新增'
                    if(this.formData.id){
                        // 编辑场景
                        msg = '更新'  // 编辑
                        // 接入接口.更新数据
                        await updateDepartmentDetail(this.formData)
                    }else{
                        //新增部门
                        await addDepartment({...this.formData,pid:this.currentNodeId})
                    }

                    // 通知父组件更新
                    this.$emit('updateDepartment')
                    // 提示消息
                    this.$message.success(`${msg}部门成功啦,去看看新数据吧~`)
                    this.close()
                }
            })
        },
        close(){

            // 修改父组件的值 子传父
            // resetFields 只能重置在模板中的绑定了的数据
            this.formData = {
                code: '', //部门编码
                introduce: '', // 部门介绍
                managerId: '', // 部门负责人id
                name: '',//部门名称
                pid: ''//  父级部门id
            }

            this.$refs.addDept.resetFields() //重置表单
            this.$emit('update:showDialog',false)  // 通知父组件关闭弹窗
        }
    },
    computed:{  // 计算属性
        showTitle(){
            return this.formData.id ? '编辑部门':'新增部门'
        }
    }
}
</script>

<style></style>